<template>
     <div class="login_body">
      <div>
        <input class="login_text" type="text" placeHolder="账户名/手机号/Email" v-model="text">
      </div>
      <div>
        <input class="login_text" type="password" placeHolder="请输入您的密码" v-model="pwd">
      </div>
      <div class="login_btn">
        <input type="submit" value="登录" @click="loginEvent">
      </div>
      <div class="login_link">
        <a href="#" @click="registEvent">立即注册</a>
        <a href="#">找回密码</a>
			</div>
		</div>
</template>

<script>
import cookie from 'js-cookie'
export default {
    name:'Login',
    data(){
      return{
        text:'',
        pwd:''
      }
    },
    methods:{
      async loginEvent(){
        // 发送登录请求
        let res = await this.$axios.post('/users/login',{
          username:this.text,
          password:this.pwd
        })
        console.log(res);
        // let useInfo = this.text;
        // console.log(useInfo);
        cookie.set('useInfo',this.text);
        // 如果用户登录了
        let id = cookie.get().useInfo;
        if(id){
          this.$router.push('/mine/personal')
        }else{
          this.$router.push('/mine/login')
        }
        // 登录账号密码错误时候弹出提示框,并跳到登录页
        if(res.code != 0){
          this.$dialog.alert({
            message: res.msg,
          })
          this.$router.push('/mine/login')
        }
        // 登录成功后就跳到电影页面
        //  this.$router.push('/mine/personal')
      },
      async registEvent(){
       let response = await this.$axios.post('/users/regist',{
          username:this.text,
          password:this.pwd
        })
        // console.log(response);
        if(response.code != 0){
          this.$dialog.alert({
          message: response.msg
          })
        }else{
          this.$dialog.alert({
          message: '注册成功！'
          })
          this.text= ''
          this.pwd=''
        }
      }
    }
  }
</script>

<style scoped>
#content .login_body{  width:100%;}
.login_body .login_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
.login_body .login_btn{ height:50px; margin:10px;}
.login_body .login_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.login_body .login_link{ display: flex; justify-content:space-between;}
.login_body .login_link a{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;}
</style>